<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<h1>软件公司办公自动化系统-系统管理员</h1>

			</el-header>
			<el-col :span="2">
				<el-button type="danger" plain @click="out">退出系统</el-button>
				</el-col>
			<el-container>
				<el-aside width="300px">
					<el-row>
						<el-col :span="6">
							<el-avatar :size="50" :src="circleUrl" style="align-items: left" />
						</el-col>
						<el-col :span="6"><br /><label
								style="color: #FFFFFF; font-size: large;">{{user.userName}}</label></el-col>
					</el-row>
					<el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
						default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
						<label></label><br />
						<label style="color: #FFFFFF;">系统管理</label>
						<el-sub-menu index="1">
							<template #title>
								<el-icon>
									<Checked />
								</el-icon>
								<span>机构管理</span>
							</template>
							<el-menu-item index="1-1">
								<router-link to="/department" class="style1">部门管理</router-link>
							</el-menu-item>
							  
							  
						</el-sub-menu>
						<el-sub-menu index="2">
							<template #title>
								<el-icon>
									<User />
								</el-icon>
								<span>人员管理</span>
							</template>
							<el-menu-item index="2-1">
								<router-link to="/user" class="style1">人员管理</router-link>
							</el-menu-item>
						</el-sub-menu>
						<el-sub-menu index="3">
							<template #title>
								<el-icon>
									<ChatDotRound />
								</el-icon>
								<span>权限管理</span>
							</template>
							<el-menu-item index="3-1">
								<router-link to="/permission" class="style1">权限管理</router-link>
							</el-menu-item>
						</el-sub-menu>
						<el-sub-menu index="4">
							<template #title>
								<el-icon>
									<location />
								</el-icon>
								<span>字典管理</span>
							</template>
							<el-menu-item index="4-1">
								<router-link to="/dictionary" class="style1">字典管理</router-link>
							</el-menu-item>
						</el-sub-menu><br />
					</el-menu>
				</el-aside>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
			<el-footer style="font-size:xx-small ; ">
				不良信息举报邮箱：123456789@qq.com | 涉未成年举报邮箱：123456789@qq.com | 不良信息举报电话：19932714944
				<br><a href="https://jbts.mct.gov.cn/" class="style2">12345政务服务便民热线</a> |
				<a href="" class="style2">儿童色情信息举报专区</a> |
				<a href="https://www.shdf.gov.cn/shdf/channels/740.html" class="style2">扫黄打非举报</a>
				<br>网上有害信息举报专区：<a href="https://www.12377.cn/" class="style2">中国互联网违法和不良信息举报中心</a>
				<br>公司名称：梅河口阿里嘎吧有限公司|公司地址：燕山大学5B403|电话：19932714944
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				drawer : false
			}
		},
		methods: {
			out(){
				this.$router.push("/")
			},

		},
		created() {
			let u = JSON.parse(sessionStorage.getItem("user"))
			this.user = u
		}
	}
</script>

<style>
	.el-header {
		background-color: #f4f4f5;
	}

	.el-main {
		background-color: #F0F2F5;
		height: 700px;
	}

	.el-footer {
		background-color: #FAFCFF;
	}

	.el-aside {
		background-color: #545c64;
	}

	.style1 {
		color: #FFFFFF;
		text-decoration: none;
	}

	.style2 {
		color: #000000;
		text-decoration: none;
	}
</style>
